<!DOCTYPE html>
<!--    
# Copyright (c) 2011-2021 Contributors to the Eclipse Foundation
# 
# See the NOTICE file(s) distributed with this work for additional
# information regarding copyright ownership.
# 
# This program and the accompanying materials are made available under the
# terms of the Eclipse Public License 2.0 which is available at
# http://www.eclipse.org/legal/epl-2.0
# 
# SPDX-License-Identifier: EPL-2.0
#
-->
<html lang="en">

<head>
  <title>WebSphere MQ Web client Tutorial</title> 
  <link rel="stylesheet" href="../style.css" type="text/css" />
  <script type="text/javascript" src="../WebSocket/mqttws31.js">
  </script>
  <script type="text/javascript">
  var clientId =  "Client"+new Date().getSeconds()+new Date().getMilliseconds();
  var host = location.hostname || "127.0.0.1";
  var port = location.port || 8080;
  var topic;
  var message;
  var client;
   var form = document.getElementById("tutorial");
 

  function doConnect() {   
      client = new Messaging.Client(host, Number(port), clientId);
      // client.startTrace();
      client.onConnect = onConnect;
      client.onMessageArrived = onMessageArrived;
      client.onConnectionLost = onConnectionLost;
      client.connect({onSuccess:onConnect});
  } 

  function doSubscribe() {   
      client.subscribe("/World");
  } 

  function doSend(form) {
      message = new Messaging.Message("Hello");
      message.destinationName = "/World";
      client.send(message); 
  }

  function doDisconnect() {
      client.disconnect();
  }

  // WebSockets API callbacks

  function onConnect() {
       var form = document.getElementById("tutorial");
      form.connected.checked= true;
  }

  function onConnectionLost(client, reason) {
       var form = document.getElementById("tutorial");
      form.connected.checked= false;
      if (reason !== undefined)
          alert(client.clientId+"\n"+reason);
    
  }

  function onMessageArrived(message) {
      var form = document.getElementById("tutorial");
      form.receiveMsg.value = message.payloadString;    
  }

  </script>
</head>

<body>
<h1><img src="../logo.png" />A complete web page.</h1>
  <p>This page is a complete example of an MQ Web Client application.
  
  <form id="tutorial">
  <fieldset>
  <legend id="Connect" > Connect </legend>
    First ,make  connection to the server, and set up a call back used if a 
    message arrives for this client. 
    <br> <br>
    <code>
       client = new .Client(host, port, clientId);<br>
       client.onMessageArrived = onMessageArrived;<br>
       client.connect({onSuccess:onConnect});
    </code>
    <br>
    <input type="button" value="Connect" onClick="doConnect(this.form)"
  name="Connect"/> 
    <input type="checkbox" name="connected" disabled="disabled"/> 
  </fieldset>
 
  <fieldset>
  <legend id="Subscribe" > Subscribe </legend> 
  Make a subscription to topic "/World".
    <br><br>
    <code>  
      client.subscribe(&quot;/World&quot;);<br>
    </code>
  <br> <input type="button" value="Subscribe" onClick="doSubscribe(this.form)"/> 
  </fieldset>
  
  <fieldset>
  <legend id="Send" > Send </legend> 
    Create a Message object containing the word "Hello" and then publish it at
    the server.
    <br><br>
    <code>
      message = new Messaging.Message("Hello");<br>
      message.destinationName = "/World";<br>
      client.send(message);   
    </code>
    <br> 
    <input type="button" value="Send" onClick="doSend(this.form)"/>
  </fieldset>

  <fieldset>
  <legend id="Receive" > Receive </legend> 
    A copy of the published Message is received in the callback we created
    earlier.
    <br><br>
    <code>
      function onMessageArrived(message) {<br>
        &nbsp;&nbsp;var form = document.getElementById('send');<br>
        &nbsp;&nbsp;form.receiveMsg.value = message.payloadString;<br>    
      } 
    </code>
  <textarea name="receiveMsg" rows="1" cols="40" disabled="disabled"></textarea>
  </fieldset>

  <fieldset>
  <legend id="Disconnect" > Disconnect </legend>
    Now disconnect this client from the server. 
    <br> <br>
    <code>
       client.disconnect();
    </code>
  <br> <input type="button" value="Disconnect" 
  onClick="doDisconnect(this.form)"/> 
  </fieldset>
   </form>

<div>
  <p><a href="Tutorial31_Start.html">Back to the start.</a></p> 
  <p><a href="Tutorial31_Messages.html">More about messages.</a></p> 
  <p><a href="../index.html">Home.</a></p>
</div>

</body>
</html>
